<template>
  <el-dialog
    v-model="dialog"
    width="40%"
    align-center
    class="p-0 min-w-500"
    :show-close="false"
    :lock-scroll="false"
    :before-close="handleClose"
  >
    <div class="agent-card-banner">
      <div class="flex-c flex-col text-50">
        <div>
          {{ cardData.meta.avatar }}
        </div>
      </div>
      <div class="flex-c flex-col relative p-16 pb-24 gap-16">
        <h2>
          {{ cardData.meta.title }}
        </h2>
        <div class="tags flex-c flex-wrap gap-6">
          <span v-for="item in cardData.meta.tags" :key="item">
            {{ item }}
          </span>
        </div>
        <div class="desc">
          {{ cardData.meta.description }}
        </div>
      </div>
      <Markdown class="market" :marked="cardData.meta.systemRole" />
      <div class="flex-c py-20">
        <el-button class="w-306" @click="startConversation()"> 开始会话 </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ModelID } from "@shared/provider"
import { onBeforeUnmount, onMounted, ref } from "vue"

import { getModelId } from "@/ai/utils"
import { useState } from "@/hooks/useState"
import { useChatStore, useRobotStore, useSidebarStore } from "@/stores"
import emitter from "@/utils/mitt-bus"

const cardData = ref({})
const sidebarStore = useSidebarStore()
const robotStore = useRobotStore()
const chatStore = useChatStore()
const [dialog, setDialog] = useState(false)

function startConversation(item = cardData.value) {
  const { identifier, meta } = item
  const defaultBot = robotStore.defaultProvider
  const prompt = {
    id: identifier,
    meta,
    lang: "cn",
    prompt: [{ role: "system", content: meta.systemRole }],
  }
  robotStore.setPromptStore([prompt], defaultBot)
  const id = getModelId(defaultBot) || ModelID.OpenAI
  setDialog(false)
  sidebarStore.toggleOutside({ path: "/chat" })
  chatStore.addConversation({ sessionId: `${"C2C"}${id}` })
  setTimeout(() => {
    chatStore.addAiPresetPromptWords()
  }, 200)
}

function handleClose(done: () => void) {
  done()
}

function setAgentCard(data) {
  cardData.value = data
  setDialog(true)
}

onMounted(() => {
  emitter.on("openAgentCard", (data) => {
    setAgentCard(data)
  })
})

onBeforeUnmount(() => {
  emitter.off("openAgentCard")
})
</script>

<style lang="scss" scoped>
.agent-card-banner {
  .tags {
    span {
      color: #666666;
      background: var(--tags-back);
      height: 20px;
      line-height: 20px;
      padding: 0 7px;
      display: flex;
      align-items: center;
      border-radius: 4px;
      white-space: nowrap;
      text-align: center;

      &:hover {
        background: var(--tags-back-hover);
      }
    }
    .desc {
      color: #666666;
      text-align: center;
      line-height: 22px;
    }
  }
  .market {
    max-height: 320px;
    overflow: auto;
    padding: 16px;
  }
}
</style>
